<template>
  <div class="menu-wrapper">
    <el-form ref="mapLineForm" :model="form" :rules="rules" label-width="100px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="线路名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="设置围栏" prop="mapPoint">
            <el-button v-show="!form.mapPoint[0]" type="primary" round @click="mapShowFn"><i class="el-icon-map-location" /> 点击选择</el-button>
            <el-tooltip class="item" effect="dark" content="点击重新设置围栏" placement="top">
              <el-link v-show="form.mapPoint[0]" type="primary" :underline="false" @click="mapShowFn">点击重新设置围栏</el-link :underline="false">
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="所属门店" prop="shopId">
            <el-select v-model="form.shopId" style="width: 100%;" clearable placeholder="请选择门店">
              <el-option v-for="item in shopIdOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="配送人员">
            <el-select style="width: 100%" v-model="form.shippingEmployeeId"  :filter-method="remoteMethod" filterable placeholder="请选择">
              <el-option
                v-for="item in sysEmployeeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button v-permission="['mapLine.add']" type="primary" :loading="clicked" @click="saveMapLine('mapLineForm')">
          完 成
        </el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="位置信息"
      :visible.sync="mapShow"
      :fullscreen="true"
      width="800px"
      :before-close="handleClose"
    >
      <Map ref="mapRef" map-point :init-map-point="form.mapPoint" :isInitCenter="ceshiCenter"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="saveMapPoint">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
</style>
<script>
  import {list as sysEmployeeList} from '@/api/sysEmployee'
import { EventBus } from '@/api/eventBus'
import Map from '@/components/GaodeMap/index'
import { save } from '@/api/mapLine'
import { list as shopList } from '@/api/shop'
import permission from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'Add',
  filters: {},
  directives: { permission },
  components: { Map },
  data() {
    return {
      ceshiCenter:[25.439092, 119.031851],
      sysEmployeeList:[],
      clicked: false, // 按钮防双击
      mapShow: false,
      shopIdOptions: [],
      form: {
        mapPoint: [], // 围栏
        shippingEmployeeId:'',
        name: '',
        shopId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入路线名称', trigger: 'blur' }
        ],
        mapPoint: [
          { required: true, message: '请设置围栏', trigger: 'blur' }
        ],
        shopId: [
          { required: true, message: '请选择所属门店', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadSysEmployee('')
    this.getShop()
  },
  methods: {
    selectSysEmployee(data) {
      this.form.shippingEmployeeId = data
    },
    mapShowFn() {
      this.mapShow = !this.mapShow
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    remoteMethod(query){
      this.loadSysEmployee(query)
    },
    //  业务员
    loadSysEmployee(query) {
      var _this = this
      let params = new URLSearchParams();
      params.append('name',query)
      sysEmployeeList(params).then(response => {
        console.log(response);
        _this.sysEmployeeList = response.data.data
      }).catch(error => {
        console.log('error!!')
      });
    },
    saveMapPoint() { // 保存围栏
      this.form.mapPoint = this.$refs.mapRef.getMapPoint()
      this.mapShow = false
    },
    getShop() { // 获取仓库
      shopList().then(res => {
        this.shopIdOptions = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    saveMapLine(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.clicked = true
          save(this.form).then(res => {
            console.log(res)
            if (res.type == 'success') {
              EventBus.$emit('mapLine-add', res.data)
              this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                  path: '/mapLine/list'
                })
              })// 关闭当前tab回到列表
            } else { this.$message({ message: res.content, offset: 120, center: true }) }
            this.clicked = true
          }).catch(err => {
            this.clicked = false
            console.log(err)
          })
        }
      })
    }
  }
}
</script>
